<template>
	<view class="container">
		<view class="bookDeatil">
			<view class="bookImage">
				<uv-image radius="0rpx" :customStyle="customStyle3" :src="getData.imgUrl" width="208rpx" 
					mode eight="292rpx"></uv-image>
			</view>
			<view class="detail">
				<!-- <uv-text :size="21" :text="getData.journalname"></uv-text> -->
				<p class="ellipsis" style="font-size: 34rpx;">{{getData.journalname}}</p>
				<view class="teacher_study">


					<view class="author">
						<uv-text size="16" text="作者:" color="#86909C"></uv-text>
						<uv-text class="name" size="16" color="#008BFF" :text="getData.editor"></uv-text>
					</view>
					<view class="press">
						<uv-text color="#86909C" :text="'期数：'+getData.issn"></uv-text>
						<!-- <uv-text class="study" size="16" color="#51575e" text="1247"></uv-text> -->
					</view>

					<view class="publication_time">
						<uv-text class="item" text="类型:" color="#86909C"></uv-text>
						<uv-text class="itemNum" :text="getData.periodicaltype"></uv-text>
					</view>
				</view>
			</view>
		</view>
		<view class="read_button">
			<uv-row gutter="12">
				<uv-col span="8">
					<uv-button :custom-style="customStyle" size="large" text="开始阅读" type="primary"
						@click="look"></uv-button>
				</uv-col>
				<uv-col span="3">
					<uv-button @click="stars" v-if="!data.stars" :custom-style="customStyle2" :icon="staring"
						size="large" text="收藏"></uv-button>
					<uv-button v-else @click="stars" :custom-style="customStyle2" :icon="unstaring" size="large"
						text="收藏"></uv-button>
				</uv-col>
			</uv-row>
		</view>
		<view class="segmentedControl">
			<uni-segmented-control class="controller" :current="current" :values="items" @clickItem="onClickItem"
				styleType="text" activeColor="#008BFF"></uni-segmented-control>
			<uv-divider class="divider" />
			<view class="content">
				<view v-show="current === 0">
					<view class="introduction">
						<text>{{getData.introduction}}</text>
					</view>
				</view>
				<view v-show="current === 1">
					<view class="list_container">
						<view class="num">共21集</view>
						<view class="list3">
							<!-- 							<view class="list" v-for="item in list.list">
								<view class="title">{{item.titile}}</view>
								<uv-divider class="divider2" />
							</view> -->
							<view class="list" v-for="(item,index) in num" :key="index">
								<view style="margin-bottom: 3%;">
									{{item.year}}
								</view>
								<view style="display: flex !important; align-items: center; flex-wrap: wrap;">
									<view v-for="i in item.num">
										<view style="margin-right: 30rpx;">
											<uv-button @click="jourmal(i,item.year,getData.gch)"
												:custom-style="customStyles" :text="'第 '+i+' 期'"></uv-button>
										</view>

									</view>
								</view>

							</view>
						</view>
						<view style="height: 1200rpx;">
							<uv-popup ref="popup" mode="bottom" :customStyle="stylePopup">
								<view style="width: 100%">
									<view class="list_all" style="font-size: 42rpx;">{{getData.journalname}}</view>
									<view class="list1" v-for="(item,index) in listNum" :key="index">
										<view class="list_right">
											<view style="max-width: 85vw;" @click="opemJour(item.lngid)">{{item.title}}
											</view>
											<uv-icon name="arrow-right" style="margin-left: auto;"></uv-icon>
										</view>

										<uv-divider style="width: 100%;"></uv-divider>
									</view>
								</view>
							</uv-popup>
						</view>


						<!-- <uv-tabbar class="jcontainer">
							<button @click="jourmal" :plain="true" class="jourmal">
								<image style="width: 40rpx; height: 40rpx" src="../../../static/往期报刊.png"></image>
								<text>往期期刊</text>

							</button>
						</uv-tabbar> -->
						<!--  -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import Request from '@/js_sdk/luch-request/luch-request/index.js' // 下载的插件
	import useGetGlobalProperties from '@/util/useGlobal.js'
	const httpurl = useGetGlobalProperties().$https;
	const urls = useGetGlobalProperties().$https;
	const urlwx = useGetGlobalProperties().$httpUrlWx;
	const staring = urlwx + '/star.png'
	const unstaring = urlwx + '/unstar.png'
	const http = new Request();
	onLoad((option) => {
		if (option.q) {
					let params = decodeURIComponent(option.q)
					let arry = params.split('?');
					let scene = arry[1].split('=');
					getData.value = scene[1];
				}
				if (option.id) {
					console.log(option.id);
					getData.value = option.id;
					console.log(getData.value);
				}
	});
	onMounted(() => {
		init(getData.value)
	});
	const stylePopup = {
		height: '1200rpx',
		overflowY: 'scroll'
	}
	const opemJour = (e) => {
		uni.showLoading({
			title: '正在加载中'
		})
		uni.request({
			url: httpurl + '/ruralLibrary/resource/getArticleDetail/' + e,
			method: 'GET',
			success: (res) => {
				console.log('detail', res.data)
				console.log('detailUrl', res.data.data.data.downUrl[0])
				let urlJour = res.data.data.data.downUrl[0];
				wx.downloadFile({
					url: urlJour,
					success: function(res) {
						console.log('res', res);
						var filePath = res.tempFilePath;
						wx.openDocument({
							filePath: filePath,
							fileType: 'pdf',
							showMenu: true,
							success: function(res) {
								uni.hideLoading()
								console.log('打开文档成功');
							}
						});
					}
				});
			}
		})
	}
	const look = () => {
		let code = '';
		uni.showLoading({
			title: '正在加载中'
		})

		uni.login({
			provider: 'weixin',
			onlyAuthorize: true,
			success: res => {
				console.log(res, '登录成功')
				code = res.code;
				console.log("code=" + res.code);
				uni.request({
					// url:  'https://weixin.shuzinongyue.com:8942/userInfo/getOpenId/' + code,
					// url:  'http://61.163.243.13:8944/userInfo/getOpenId/' + code,
					url:  'https://wechat.shuzinongyue.com:8922/userInfo/getOpenId/' + code,
					method: 'GET',
					success: (res) => {
						if (res.data.data) {
							console.log('res.data.look', res.data.data)
							console.log('nums', num.value)
							current.value = 1;
							uni.request({
								url: httpurl +
									'/ruralLibrary/resource/getArticleCatalogWxMini',
								method: 'POST',
								data: {
									gch: getData.value.gch,
									year: num.value[0].year,
									month: num.value[0].num[0]
								},
								success: (res) => {
									console.log('resxMini', res.data.data.data
										.list)
									listNum.value = res.data.data.data.list;
									console.log('listNum', listNum.value)
									uni.hideLoading()
								}
							})
							return;
						} else {
							uni.showToast({
								title: '请登录后进行阅读',
								icon: 'success',
								duration: 1500,
								mask: false
							});
							uni.redirectTo({
								// url: '/pages/admin/login'
							})
						}
					}
				})
			}
		})
		popup.value.open('bottom');
	}
	const customStyle3 = ref({
		boxShadow: '2px 2px 5px rgba(0, 0, 0.2, 0.5)'
	});
	const customStyles = ref({
		width: '20vw',
		marginLeft: '73rpx',
		marginBottom: '30rpx'
	})
	const img = ref();
	const getData = ref();
	const firstNum = ref();
	const num = ref();
	const resourseId = ref();


	const init = (e) => {
		const searchKeywords = e;
		uni.request({
			url: httpurl + '/ruralLibrary/resource/getJournalSearchResult',
			method: 'POST',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			data: {
				searchKeywords: searchKeywords
			},
			success: (res) => {
				if (res.data.code == 1) {
					// 待定，为何返回
					// uni.showModal({
					// 	title: '提示',
					// 	content: res.data.msg,
					// 	success: function(res) {
					// 		uni.navigateBack()
					// 	}
					// });
					uni.hideLoading();
				}
				let id = uni.getStorageSync('selectJ');
				console.log('res', res)
				getData.value = res.data.data;
				console.log('getData.value', getData.value)
					let name = getData.value.journalname;
				if (name.length > 5) {
					getData.value.journalname = name.substring(0, 5) + '..';
				}

				// getData.value.journalname = getData.value.journalname.substring(0,5)+'..';
				resourseId.value = getData.value.id;
				console.log('get', getData.value);
				num.value = getData.value.summaryList;
				for (let i = 0; i < num.value.length; i++) {
					num.value[i].num = num.value[i].num.split(',')
				}
				let user = uni.getStorageSync('userInfo');

				console.log('id', id)
				http.get('/wxApi/collect/getCollect/' + user.openId + '/' + getData.value.id, {}).then(
				// http.get('/wxApi/collect/getCollect/' + 'oq1uW6yNXNizxfWzeZY0UgfHmdlc' + '/' + getData.value.id, {}).then(
					res => {
						console.log('getCollect', res)
						data.stars = res.data == 0 ? true : false;
					})
				uni.hideLoading();
			}
		})

	}
	const items = ref(['简介', '目录']);
	const current = ref(0);
	const popup = ref();
	const listNum = ref();
	const jourmal = (num, year, gch) => {
		console.log("点击了")
		uni.showLoading({
			title: '正在加载中'
		})
		popup.value.open();
		// http.post('/ruralLibrary/resource/getArticleCatalog', {
		// 		gch: getData.value,
		// 		year: year,
		// 		month: num
		// 	},{
		// 		header:{

		// 		}
		// 	})
		// 	.then(res => {
		// 		console.log('res', res)
		// 	}).catch(err => {

		// 	})
		uni.request({
			url: httpurl + '/ruralLibrary/resource/getArticleCatalogWxMini',
			method: 'POST',
			data: {
				gch: getData.value.gch,
				year: year,
				month: num
			},
			success: (res) => {
				console.log('resxMini', res.data.data.data.list)
				listNum.value = res.data.data.data.list;
				console.log('listNum', listNum.value)
				uni.hideLoading()
			}
		})

	}
	const onClickItem = (e) => {
		if (current.value !== e.currentIndex) {
			current.value = e.currentIndex;
		}
	};
	const list = reactive({
		list: [{
				titile: '月度信息化新闻精选',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '数字技术对乡村文化变迁的赋能机制研究',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '孪生的变电站可视化监控与运维',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '云计算及物联网背景下的网络安全技术架构',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '迁移政务云过程中数据同步的安全设计',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '数字技术对乡村文化变迁的赋能机制研究',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '孪生的变电站可视化监控与运维',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			},
			{
				titile: '云计算及物联网背景下的网络安全技术架构',
				mb: '35.37M',
				src: '../../../static//播放——音频详情.png'
			}

		],
		time: [
			'2023年第1期',
			'2023年第2期',
			'2023年第3期',
			'2023年第4期',
			'2023年第5期',
			'2023年第6期',
			'2023年第7期'
		]
	})

	const data = reactive({
		list: [{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				name: '三国演义'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				name: '水浒传'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				name: '西游记'
			}
		],
		categoty: [
			'电子书',
			'有声图书',
			'报纸'
		],
		stars: true
	});
	const selectObj = ref([]);
	const stars = async () => {
		let user = uni.getStorageSync('userInfo');
		if(!user){
			uni.showToast({
				title: '请登录后进行阅读',
				icon: 'success',
				duration: 1500,
				mask: false
			});
			return
		}
		let code = '';
		const book = uni.getStorageSync('journal');
		data.stars = data.stars == false ? true : false;
		console.log(data.stars)
		if (data.stars == false) {
			uni.showToast({
				title: '收藏成功!',
				icon: 'success',
				duration: 1500,
				mask: false
			});
			uni.request({
				url: urls + '/wxApi/collect/add',
				method: 'POST',
				data: {
					openId: user.openId,
					resourceId: resourseId.value,
					dataTypeId: book
				},
				success: (res) => {
					console.log('start', res.data)
				}
			})
			return;
		} else if (data.stars == true) {
			uni.showToast({
				title: '已取消收藏!',
				icon: 'success',
				duration: 1500,
				mask: false
			});
			selectObj.value.push(resourseId.value);
			const ids = [resourseId.value];
			uni.request({
				url: urls + '/wxApi/collect/remove/' + resourseId.value,
				method: 'GET',
				success: (res) => {
					console.log('start', res.data)
				}
			})

		}


	}
	const customStyle = ref({
		height: '95rpx',
		background: '#3c9cff',
		color: '#fff',
		borderRadius: '10rpx',
		boxShadow: "0rpx 4rpx 25rpx 0rpx rgba(0,139,255,0.5)"
	});
	const customStyle2 = ref({
		border: 'none',
		height: '100rpx',
		background: '#F6F7F9',
		color: '#475054',
		borderRadius: '10rpx'
	});
</script>

<style>
	.ellipsis {
		max-width: 60vw;
		height: 40rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.list3 {
		margin-top: 40rpx;
	}

	.list_right {
		display: flex;
		align-items: center;

	}

	.list1 {
		margin-left: 40rpx;
		padding-top: 30rpx;
		font-size: 32rpx;
	}

	.list_all {
		margin-left: 40rpx;
		margin-top: 30rpx;
	}

	.jcontainer {
		display: flex;
		align-items: center;
	}

	.jcontainer image {
		margin-right: 4px;
		margin-bottom: 4px;
		vertical-align: middle;
	}

	.jourmal {
		width: 236rpx;
		height: 80rpx;
		margin-left: 32rpx;
		margin-top: 32rpx;
		color: #1D2129;
		border: none;
		background-color: #F2F3F5;
	}

	.study {
		word-break: keep-all;
		/* 添加这行代码 */
		position: absolute;
		left: 125rpx;
		bottom: 82rpx;
		color: #4E5969 !important;
	}

	.title {
		font-size: 32rpx;

		margin-bottom: 40rpx;
	}

	.file_icon2 {
		width: 45rpx;
		height: 45rpx;
		margin-left: auto;
		margin-right: 0;
		margin-top: -10px;
	}

	.list {
		margin-top: 15rpx;
		margin-bottom: 40rpx;
	}

	.mb {
		display: flex;
		color: #86909C;
		margin-top: 5rpx;

	}

	.mb_font {
		margin-left: 8rpx;
		font-size: 28rpx;
		margin-top: 3rpx;
	}

	.file_icon {
		width: 30rpx;
		height: 28rpx;
		margin-top: 10rpx;

	}

	.num {
		color: #86909C;
	}

	.list_container {
		padding: 0rpx 52rpx;
		position: relative;
		bottom: 25rpx;

		color: #4E5969;
	}

	.introduction {
		padding-top: 0rpx;
		padding-right: 60rpx;
		padding-left: 40rpx;
		text-align: justify;
		/* 设置为两端对齐 */
		line-height: 60rpx;
		text-indent: 2em;
		/* 在每一行的开头都添加两个空格的缩进 */
		color: #4E5969;
		font-size: 31rpx;
	}

	.controller {
		width: 374rpx;
		height: 84rpx;
		position: relative;
	}

	.segmentedControl {
		margin-top: 48rpx;
	}

	.itemNum {
		min-width: 100rpx;
		position: relative;
		left: 10rpx;

		color: #51575e;
	}

	.item {
		word-break: keep-all;
		/* 添加这行代码 */
	}

	.name {
		word-break: keep-all;
		/* 添加这行代码 */
		position: absolute;
		left: 80rpx;
	}

	.chapter {
		margin-top: 20rpx;
	}

	.image-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.image-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		/* 添加相对定位 */
		border-radius: 10rpx;
		margin-right: 20rpx;
		/* 		margin-bottom: 5px; */
	}

	.image-text {
		text-align: center;
		margin-top: 6px;
		font-size: 30rpx;
	}

	.like {
		margin-left: 30rpx;
		font-size: 32rpx;
	}

	.divider {
		position: relative;
		bottom: 35rpx;
	}

	.divider2 {
		position: relative;
		bottom: 5rpx;
	}

	.text {
		padding-top: 15rpx;
		padding-right: 60rpx;
		padding-left: 40rpx;
		text-align: justify;
		/* 设置为两端对齐 */
		line-height: 60rpx;
		text-indent: 2em;
		/* 在每一行的开头都添加两个空格的缩进 */
		color: #4E5969;
		font-size: 31rpx;
	}

	.collect {
		background-color: lawngreen;
		color: black;
	}

	.read_button {
		margin-top: 32rpx;
		margin-left: 30rpx;
	}

	.reading_times {
		display: flex;
		position: relative;
		left: 310rpx;
		bottom: 5rpx;
	}

	.publication_time {
		display: flex;
		align-items: center;
		position: absolute;
		top: 220rpx;
		white-space: nowrap;
		/* 添加这行代码 */
	}

	.press {
		margin-top: 123rpx;
	}

	.detail {
		position: relative;
		top: 16rpx;
		left: 15rpx;
		padding-right: 50rpx;
	}

	.author {
		display: flex;
		position: absolute;
		top: 70rpx;

	}

	.bookDeatil {
		display: flex;
		/* 使用 Flex 布局 */
		margin-left: 30rpx;
		white-space: nowrap;
		/* 添加这行代码 */
	}

	.bookImage {
		margin-right: 10px;
		/* 可根据需要调整图片和文字之间的间距 */
	}

	.container {
		position: relative;
		top: 100rpx;
		bottom: 200rpx;
		font-family: my-font;

		padding-bottom: 300rpx;
		line-height: 24px;
	}
</style>